<template>
    <div :class="['yorha-normal-btn-con', (active?'active':'')]">
        <div class="pointer">
            <img src="../assets/icons/point.png">
        </div>
        <div class="btn-con">
            <div class="swing-top"></div>
            <div class="swing-bottom"></div>
            <button>
                <div class="box"></div>
                <span>
                    <slot></slot>
                </span>
            </button>
        </div>
    </div>
</template>

<script setup>
let props = defineProps(['active','text'])
</script>

<style lang="less" scoped>
@import "../style";
.yorha-normal-btn-con {
    width: 350px;
    height: 48px;
    display: flex;
    &.active {
        &>.pointer {
            opacity: 1;
        }
        &>.btn-con {
            &>.swing-top {
                top: 0;
            }
            &>.swing-bottom {
                bottom: 0;
            }
            &>button {
                box-shadow: none;
                &::before {
                    width: 300px;
                }
                &>.box {
                    background: @white;
                }
                &>span {
                    font-size: medium;
                    color: @white;
                }
            }
        }


    }
    &:hover {
        &>.pointer {
            opacity: 1;
        }
        &>.btn-con {

            &>button {
                &::before {
                    width: 300px;
                }
                &>.box {
                    background: @white;
                }
                &>span {
                    font-size: medium;
                    color: @white;
                }
            }
        }
    }
    &>.pointer {
        width: 50px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        &>img {
            width: 30px;
            height: 30px;
        }
    }
    &>.btn-con {
        width: 300px;
        height: 48px;
        position: relative;

        &>.swing-top {
            width: 100%;
            top: 6px;
            height: 3px;
            position: absolute;
            background: @darkGray;
            z-index: -1;
            transition: top 100ms ease-in-out;
        }

        &>.swing-bottom {
            width: 100%;
            bottom: 6px;
            height: 3px;
            position: absolute;
            background: @darkGray;
            z-index: -1;
            transition: bottom 100ms ease-in-out;
        }

        &>button {
            width: 300px;
            height: 36px;
            margin: 6px 0;
            background: @darkYellow;
            border: none;
            outline: none;
            display: flex;
            justify-content: left;
            align-items: center;
            padding: 0;
            box-shadow: 2px 2px 2px @darkYellow;
            &::before {
                content: '';
                position: absolute;
                top: 6px;
                width: 0;
                height: 36px;
                background: @darkGray;
                transition: width 200ms ease-in-out;
                z-index: 0;
            }
            &>.box {
                z-index: 1;
                width: 20px;
                height: 20px;
                margin: 8px;
                background: @darkGray;
            }
            &>span {
                z-index: 1;
                font-size: medium;
                color: @darkGray;
            }
        }
    }
}
</style>